const path = require('path');
const miniChain = require('./webpack/miniChain');
const h5Chain = require('./webpack/h5Chain');
import { defineConfig } from '@tarojs/cli';

const config = defineConfig({
  projectName: 'vh-mobile-demo',
  date: '2022-1-23',
  designWidth: 750,
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2,
  },
  defineConstants: {},
  // lazyCodeLoading: 'requiredComponents',
  compiler: {
    type: 'webpack5',
    // 依赖预编译配置
    prebundle: {
      //H5 contenthash 在已开启prebundle后打包文件无效
      // enable: process.env.NODE_ENV === 'production' ? false : true,
      enable: false,
      exclude: [
        '@vh-mobile/pro-components',
        '@vh-mobile/pro-services',
        '@vh-mobile/pro-utils',
        '@vh-mobile/pro-validator',
      ],
    },
  },
  // 持久化缓存配置
  cache: {
    enable: false,
  },
  sourceRoot: 'src',
  outputRoot: process.env.TARO_ENV === 'h5' ? 'dist' : process.env.TARO_ENV,
  plugins:
    process.env.NODE_ENV === 'development'
      ? [['@tarojs/plugin-framework-react', { reactMode: 'concurrent' }]]
      : [
          ['@tarojs/plugin-framework-react', { reactMode: 'concurrent' }],
          // H5编译后 页面报错react.130 日期无法正常引入，开启后让taro组件全局引入
          path.join(process.cwd(), 'config/webpack/configPlugin'),
        ],
  alias: {
    '@/components': path.resolve(__dirname, '..', 'src/components'),
    '@/services': path.resolve(__dirname, '..', 'src/services'),
    '@/utils': path.resolve(__dirname, '..', 'src/utils'),
    '@/mock': path.resolve(__dirname, '..', 'src/mock'),
    '@/hooks': path.resolve(__dirname, '..', 'src/hooks'),
    '@/store': path.resolve(__dirname, '..', 'src/store'),
    '@/assets': path.resolve(__dirname, '..', 'src/assets'),
    '@/style': path.resolve(__dirname, '..', 'src/style'),
    '@/models': path.resolve(__dirname, '..', 'src/models'),
    // '@/access': path.resolve(__dirname, '..', 'src/access.ts'),
    // '@/pages': path.resolve(__dirname, '..', 'src/pages.ts'),
  },
  copy: {
    patterns: [],
    options: {},
  },
  framework: 'react',

  mini: {
    optimizeMainPackage: {
      enable: true,
    },
    // 默认值：watch 模式下为 true，否则为 false。
    // enableSourceMap:true,
    sourceMapType: 'source-map',
    commonChunks:
      process.env.NODE_ENV === 'development'
        ? [
            'runtime',
            'vendors',
            'taro',
            'common',
            'custom-components',
            'custom-common',
            'vantui',
            'vant',
            'vh-mobile',
            'recoil',
            'react-vendor',
            // 'vendors-modules',
          ]
        : [],
    webpackChain(chain) {
      miniChain(chain);
    },
    lessLoaderOption: {
      lessOptions: {
        modifyVars: {
          hack: `true; @import "${path.join(process.cwd(), 'src/style/index.less')}";${
            process.env.TARO_ENV === 'kwai'
              ? `@import "${path.join(process.cwd(), 'src/style/kwai.less')}";`
              : ''
          }`,
        },
      },
      // 适用于全局引入样式
      // additionalData: "@import '~/src/style/index.less';",
    },
    postcss: {
      autoprefixer: {
        enable: true,
        config: {
          // autoprefixer 配置项
        },
      },
      pxtransform: {
        enable: true,
        config: {},
      },
      url: {
        enable: true,
        config: {
          limit: 1024, // 设定转换尺寸上限
        },
      },
      cssModules: {
        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]',
        },
      },
    },
    miniCssExtractPluginOption: {
      ignoreOrder: true,
    },
    imageUrlLoaderOption: {
      limit: 2048,
    },
  },
  h5: {
    devServer: {
      headers: {
        // 'Access-Control-Allow-Origin': '*',//钉钉本地调试工具
      },
    },
    router: {
      // mode: process.env.BUILD_GH ? 'hash' : 'browser',
      mode: 'hash', //钉钉本地调试工具需要hash模式
    },
    // 默认值：watch 模式下为 true，否则为 false。
    // enableSourceMap:true,
    // sourceMapType: 'source-map',
    sourceMapType: 'none',
    chunks:
      process.env.NODE_ENV === 'production'
        ? [
            'chunk-custom-components',
            'chunk-custom-common',
            'chunk-runtime',
            'chunk-vendors',
            'chunk-taro',
            'chunk-vantui',
            'chunk-vant',
            'chunk-vh-mobile',
            'chunk-recoil',
            'chunk-react-vendor',
          ]
        : [],
    webpackChain(chain) {
      h5Chain(chain);
    },
    output: {
      filename: 'js/[name].[contenthash].js',
      chunkFilename: 'js/[name].[contenthash].js',
    },
    publicPath: process.env.BUILD_GH ? './' : '/',
    esnextModules: [/@antmjs[\\/]vantui/, /@vh-mobile[\\/]pro-components/],
    lessLoaderOption: {
      lessOptions: {
        modifyVars: {
          hack: `true; @import "${path.join(process.cwd(), 'src/style/index.less')}";`,
        },
      },
      // 适用于全局引入样式
      // additionalData: "@import '~/src/style/index.less';",
    },
    staticDirectory: 'static',
    postcss: {
      autoprefixer: {
        enable: true,
        config: {},
      },
      pxtransform: {
        enable: true,
        config: {},
      },
      cssModules: {
        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]',
        },
      },
    },
    miniCssExtractPluginOption: {
      ignoreOrder: true,
      filename: 'css/[name].[contenthash].css',
      chunkFilename: 'css/[name].[contenthash].css',
    },
    imageUrlLoaderOption: {
      limit: 2048,
    },
    // plugins: ['taro-plugin-string-style'],
  },

  // plugins: ['@tarojs/plugin-platform-alipay-dd', '@tarojs/plugin-platform-kwai'],
});

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'));
  }
  let configPath = 'prod';
  if (process.env.BUILD_ENV) {
    configPath = `${configPath}-${process.env.BUILD_ENV}`;
  }

  return merge({}, config, require(`./${configPath}`));
};
